<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model='name'>
        姓名：<input type="text" v-model='formData.name'>
        年龄：<input type="text" v-model='formData.age'>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data () {
                return {
                    name:'',
                    formData:{
                        name:'',
                        age:'',
                    }
                }
            },
            methods: {
                watchName1(newVal,oldVal){
                    console.log(newVal,'watchName1');
                }
            },
            //watch不推荐使用箭头函数
            watch: {
                //方法一
                name:[
                    'watchName1', //方法一
                    function watchName2(newVal) {  //方法二
                        console.log(newVal,'watchName2');
                    },
                    { //方法三
                        handler(newVal){
                            console.log(newVal,'watchName3');
                        },
                    },
                ],
                //方法二：
                name(newVal,oldVal){
                    console.log(newVal,'watch2');
                },
                //方法三：
                name:{
                    handler(newVal,oldVal){
                        console.log(newVal,'watch3');
                    }
                },
                'formData.name'(newVal,oldVal){
                    console.log(newVal,'对象');
                }
            }
        })
    </script>
</body>
</html>